<template>
    <div class="search-suggestion">
      <van-cell
      v-for="(item, index) in suggestions"
      :key="index"
      icon="search"
      @click="$emit('search', item)"
      >
      <!-- <div slot="title" v-html="item"></div> -->
      <div slot="title" v-html="highlightStr(item)"></div>
      </van-cell>
    </div>
</template>

<script>
// 1. 基本思路
//    - 当搜索框输入内容的时候，请求加载联想建议的数据
//    - 将请求得到的结果绑定到模板中
// 2. 基本功能
//    - 将父组件中搜索框输入的内容传给联想建议子组件
//    - 在子组件中监视搜索框输入内容的变化，如果变化则请求获取联想建议数据
//    - 将获取到的联想建议数据展示到列表中
import { getSearchSuggestions } from '@/api/search.js'
import { debounce } from 'lodash'

export default {
  name: 'SearchSuggestion',
  data () {
    return {
      suggestions: [] // 联想建议数据列表
    }
  },
  props: {
    searchText: { // 接收父组件index.vue中传过来的值 searchText是搜索框中的具体内容
      type: String,
      required: true
    }
  },
  watch: {
    searchText: { // watch侦听器监听搜索框内容searchText的变化 若发生变化,则触发handler函数
    //     使用 `debounce` 函数
    // - 参数 1：一个函数
    // - 参数 2：延迟时间，单位是毫秒
    // - 返回值：防抖之后的函数
      handler: debounce(async function (val) {
        try {
          const { data } = await getSearchSuggestions(val)
          // console.log(data)
          this.suggestions = data.data.options
        } catch (err) {
          console.log('错误了 模糊查询')
        }
      }, 2000),
      immediate: true
      // 当未设置immediate或者immediate的值为false时，被侦听的变量在页面初次加载时第一次绑定值的时候，并不会执行监听操作；
      // 但是当设置了immediate的值为true时，则会立刻执行一次监听操作。
    }
  },
  methods: {
    highlightStr (item) {
      const reg = new RegExp(this.searchText, 'gi')
      return item.replace(reg, `<span style="color:red;">${this.searchText}</span>`)
    }
  }
}
</script>

<style>

</style>
